<template>
	<view>
		<nav-box title="训考计划" :borderBottom="true"></nav-box>
		<view class="list-box">
			<block v-for="item in list" :key="item.id">
				<navigator url="../planDetail/planDetail" hover-class="none" class="u-m-b-48">
					<view class="item-box">
						<image src="../../static/images/icon_2.png" mode=""></image>
						<view class="info-box">
							<text class="title">{{ item.title }}</text>
							<view class="label-box">
								<text>阶段</text>
								<text>{{ item.stage }}</text>
							</view>
							<view class="label-box">
								<text>周期</text>
								<text>{{ item.cycle }}</text>
							</view>
							<view class="label-box">
								<text>进度</text>
								<text>{{ item.progress }}%</text>
							</view>
						</view>
					</view>
				</navigator>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					id: 1,
					title: '计划1',
					stage: 3, //阶段
					cycle: '2021/05/21～2021/06/21', //周期
					progress: 25 //进度
				},
				{
					id: 2,
					title: '计划2',
					cycle: '2021/05/21～2021/06/21',
					progress: 70
				}
			]
		};
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #ffffff;
	.list-box {
		padding: 32upx;
		.item-box {
			display: flex;
			align-items: center;
			image {
				width: 184upx;
				height: 244upx;
				margin-right: 32upx;
			}
			&:not(:last-child) {
				margin-bottom: 48upx;
			}
			.label-box {
				display: flex;
				color: #7e7e7e;
				&:not(:last-child) {
					margin-bottom: 16upx;
				}
				text {
					&:first-child {
						margin-right: 20upx;
						white-space: nowrap;
					}
				}
			}
		}
		.info-box {
			text {
				display: block;
			}
			.title {
				font-size: 32upx;
				color: #4b4b4b;
				font-weight: 500;
				margin-bottom: 20upx;
			}
		}
	}
}
</style>
